<template>
  <div class="container">
    <Content :style="{ padding: '0 10px' }">
      <Card>
        <Form :model="formItem">
          <FormItem>
            <Row>
              <Col span="2" :style="{ padding: '5px 0 0 30px' }">
                <span>标签名称</span>
              </Col>
              <Col span="3">
                <Input v-model="formItem.tagName" size="large" />
              </Col>
              <Col span="1" :style="{ padding: '5px 0 0 10px' }">
                <span>状态</span>
              </Col>
              <Col span="3">
                <Select v-model="formItem.state" size="large">
                  <Option value="1">启用</Option>
                  <Option value="2">禁用</Option>
                </Select>
              </Col>
              <Col span="2" align="center">
                <Button @click="empty">清除</Button>
              </Col>
              <Col span="2">
                <Button type="primary" @click="search">搜索</Button>
              </Col>
              <Col span="10" align="end">
                <Button type="text" @click="jumpdiscipline" v-show="isjump"><Icon type="ios-arrow-round-back" />返回学科</Button>
                <Button type="success" @click="addformItem(1)"><Icon type="md-add" />新增标签</Button>
              </Col>
            </Row>
          </FormItem>
        </Form>
        <el-alert :title="`数据一共 ${page.total}条`" type="info" show-icon> </el-alert>
        <Table :columns="columns" :data="list" :style="{ margin: '20px 0 ' }">
          <template slot="addDate" slot-scope="{ row }">
            <span>{{ row.addDate | time('YYYY-MM-DD') }}</span>
          </template>
          <template slot="state" slot-scope="{ row }">
            <span>{{ row.state === 1 ? '启动' : '禁用' }}</span>
          </template>
          <template slot="action" slot-scope="{ row }">
            <Button type="text" @click="prohibited(row)">{{ row.state == 0 ? '禁用' : '启用' }}</Button>
            <Button type="text" @click="addformItem(2, row)">修改</Button>
            <Button type="text" @click="deleterows(row)">删除</Button>
          </template>
        </Table>
        <Page :total="page.total" show-elevator show-sizer align="end" :style="{ padding: '20px 0 0' }" @on-change="Changepage" />
      </Card>
    </Content>
    <!-- 新增弹出层 -->
    <Modal v-model="ismodal" :title="title" @on-ok="ok" @on-cancel="ismodal = false" width="900px">
      <Form :model="discipline" :rules="ruleValidate" :label-width="130">
        <FormItem label="所属学科" prop="subjectID">
          <Select v-model="discipline.subjectID" style="width: 500px; padding-bottom: 20px">
            <Option v-for="item in disciplinelist" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="目录名称" prop="tagName">
          <Input v-model="discipline.tagName" style="width: 500px; padding-bottom: 20px" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import moment from 'moment'
import { list, remove, add, changeState, update } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      ismodal: false,
      formItem: {
        tagName: '',
        state: ''
      },
      ruleValidate: {
        subjectID: [{ required: true, message: '请选择', trigger: 'blur' }],
        tagName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      },
      columns: [
        {
          title: '序号',
          key: 'id'
        },
        {
          title: '所属学科',
          key: 'tagName'
        },
        {
          title: '标签名称',
          key: 'subjectName'
        },
        {
          title: '创作者',
          key: 'username'
        },
        {
          title: '创建日期',
          key: ' addDate',
          slot: 'addDate'
        },
        {
          title: '状态',
          key: 'state',
          slot: 'state'
        },
        {
          title: '操作',
          slot: 'action',
          width: 260,
          align: 'center'
        }
      ],
      list: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      disciplinelist: [],
      discipline: {
        id: null,
        subjectID: null,
        tagName: ''
      },
      title: '',
      isjump: false
    }
  },
  created () {
    this.gitlist()
    if (this.$route.query.id) {
      this.isjump = true
    }
  },
  filters: {
    time (val, type) {
      return moment(val).format(type)
    }
  },
  methods: {
    // 页面渲染
    async gitlist () {
      const { data } = await list(this.page)
      this.list = data.items
      this.page.total = data.counts
    },
    // 搜索
    async search () {
      const { data } = await list(this.formItem)
      this.list = data.items
      this.page.total = this.list.length
    },
    // 清空
    empty () {
      this.formItem = {}
      this.gitlist()
    },
    // 删除
    async deleterows (data) {
      await remove(data).then(() => {
        this.$Message.success('删除成功')
        this.gitlist()
      })
    },
    // 添加 修改
    async addformItem (val, row) {
      this.ismodal = true
      const { data } = await simple(this.page)
      this.disciplinelist = data
      if (val === 1) {
        this.title = '添加标签'
      } else if (val === 2) {
        this.title = '修改标签'
        this.discipline = {
          subjectID: row.subjectID,
          tagName: row.tagName,
          id: row.id
        }
      }
    },
    // 确认添加 修改
    async ok () {
      if (this.title === '添加标签') {
        await add(this.discipline).then(() => {
          this.$Message.success('添加成功')
          this.discipline = {}
          this.gitlist()
        })
      } else {
        await update(this.discipline).then(() => {
          this.$Message.success('修改成功')
          this.discipline = {}
          this.gitlist()
        })
      }
      this.discipline = {}
    },
    // 禁用
    async prohibited (data) {
      data.state = data.state === 1 ? '0' : '1'
      await changeState(data).then(() => {
        this.gitlist()
        this.$Message.success('成功')
      })
    },
    // 返回学科
    jumpdiscipline () {
      this.$router.back()
    },
    Changepage (newpage) {
      this.page.page = newpage
      this.gitlist()
    }
  }
}
</script>

<style scoped lang='less'>
</style>
